<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        123123123
    </div>
</body>
<script>

    var box = document.querySelector(".box");

    // 常规浏览器的写法 
    // box.addEventListener("click",function(){
    //     console.log(this);
    // })

    // IE低版本
    // box.attachEvent("onclick",function(){
    //     console.log(this);
    // })

    // 兼容写法
    // function addEvent(ele,type,callback) {
    //     if (ele.addEventListener) {
    //         ele.addEventListener(type, callback)
    //     } else {
    //         ele.attachEvent("on"+ type, function () {
    //             callback.call(ele,window.event);
    //         })
    //     }
    // }


    // try...catch => 错误发生时的补救措施
    function addEvent(ele,type,callback) {
        try{
            ele.addEventListener(type, callback);
        }catch(err){
            ele.attachEvent("on"+ type, function () {
                callback.call(ele,window.event);
            })
        }
    }


</script>

</html>